<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>公司职员管理</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="layui/layui.all.js"></script>
	</head>

	<body>
		 <div style="margin:10px 10px;">
		<div class="layui-elem-quote">
			<span class="layui-breadcrumb">
				<a href="">首页</a>
				<a href=""><span class="layui-icon layui-icon-template"></span>基础信息管理</a>
			<a href=""><span class="layui-icon layui-icon-group"></span>公司职员管理</a>
			</span>
		</div>

		<div>
			<form class="layui-form">
				<div class="layui-inline">
					<label class="layui-form-label">姓名：</label>
					<div class="layui-input-inline">
						<input type="text" id="" class="layui-input" />
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">所在部门：</label>
					<div class="layui-input-inline">
						<select name="">
							<option value="">全部</option>
							<option value="0">北京人力资源部</option>
							<option value="1">北京开发部</option>
							<option value="2">北京行政事业部</option>
							<option value="3">北京开发部</option>
							<option value="4">天津开发部</option>
						</select>
					</div>
				</div>

				<div class="layui-inline">
					<div class="layui-input-inline">
						<a href="" class="layui-btn layui-btn-success">
							<span class="layui-icon layui-icon-search"></span>搜索search</a>
					</div>
				</div>
			</form>
		</div>

		<!--<div class="layui-card">
			<div class="layui-card-body">
				<table class="layui-table">
					<tr>
						<td><span class="layui-icon layui-icon-note"></span>员工编号</td>
						<td>姓名</td>
						<td>所在部门</td>
						<td>上级</td>

					</tr>
					<tr>
						<td>BD0020003</td>
						<td>楚风韩</td>
						<td>北京人力资源部</td>
						<td></td>

					</tr>
					<tr>
						<td>BD0010001</td>
						<td>刘青</td>
						<td>北京开发部</td>
						<td></td>

					</tr>
					<tr>
						<td>BD0010002</td>
						<td>王海川</td>
						<td>北京开发部</td>
						<td>BD0010001刘青</td>

					</tr>
					<tr>
						<td>BD0010002</td>
						<td>王光伟</td>
						<td>北京开发部</td>
						<td>BD0010001刘青</td>

					</tr>
					<tr>
						<td>BD0010002</td>
						<td>君迪</td>
						<td>北京开发部</td>
						<td>BD0010001刘青</td>
					</tr>

					<tr>
						<td>BD0040007</td>
						<td>王枭</td>
						<td>北京行政事业部</td>
						<td></td>
					</tr>

					<tr>
						<td>BD0030005</td>
						<td>曲苗</td>
						<td>北京财务部</td>
						<td></td>
					</tr>

					<tr>
						<td>TDD0010001</td>
						<td>田武胜</td>
						<td>天津开发部</td>
						<td></td>
					</tr>

					<tr>
						<td>TD0010002</td>
						<td>王川</td>
						<td>天津开发部</td>
						<td>TD0010001田武胜</td>
					</tr>
					<tr>
						<td>TD0010003</td>
						<td>刘青</td>
						<td>天津开发部</td>
						<td>TD0010001田武胜</td>
					</tr>
					<tr>
						<td colspan="4">显示第1到第10条记录，总共10条记录&nbsp;&nbsp;每页显示10条记录</td>
					</tr>
				</table>
				
			</div>
		</div>-->

		<script src="../layui/layui.all.js"></script>
		<script>
			layui.use(['element', 'form', 'laypage','table'], function() {
				var element = layui.element;
				var page = layui.laypage;
				var form = layui.form;
				var table = layui.table;
				table.render({
					elem: '#demo',
					height: 460,
					width: 1159,
					url: 'tableJson/CompanyPeople.json',
					page: true, //开启分页
						
					limit: 5,
					limits: [5, 10, 15, 20, 25, 30],
					loading: false,
					done: function(res, curr, count) {
						$("table").css("width", "90%");
					},
					cols: [
						[ //表头
							{
								field: 'id',
								title: '员工编码',
								width: 288,
								sort: true,
								fixed: 'left'
							}, {
								field: 'showvalue',
								title: '姓名',
								width: 289
							}, {
								field: 'class',
								title: '所在部门',
								width: 288,
								sort: true
							}, {
								field: 'desc',
								title: '上级',
								width: 289
							}, 
						]
					]
				});

			});
		</script>

		<div class="layui-row">
			<table id="demo" lay-filter="test" ></table>
		</div>	
		<div align="right">
			<div id="page"> </div>
		</div>
		</div>
	</body>

</html>